<template>
  <div ref="lakerEcharts" :style="{ height: height, width: width }"></div>
</template>

<script>
import * as echarts from 'echarts'
import themeJSON from '@/assets/weizwz.json'
echarts.registerTheme('weizwz', themeJSON)
const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj)

export default {
  ...echarts,
  name: 'lakerEcharts',
  props: {
    height: { type: String, default: '100%' },
    width: { type: String, default: '100%' },
    nodata: { type: Boolean, default: false },
    option: { type: Object, default: () => {} }
  },
  data() {
    return {
      isActivat: false,
      myChart: null
    }
  },
  watch: {
    option: {
      deep: true,
      handler(v) {
        unwarp(this.myChart).setOption(v)
      }
    }
  },
  computed: {
    myOptions: function () {
      return this.option || {}
    }
  },
  activated() {
    if (!this.isActivat) {
      this.$nextTick(() => {
        this.myChart.resize()
      })
    }
  },
  deactivated() {
    this.isActivat = false
  },
  mounted() {
    this.isActivat = true
    this.$nextTick(() => {
      this.draw()
    })
  },
  methods: {
    chartOnclick(params) {
      this.$emit('chartOnclick', params)
    },
    draw() {
      var myChart = echarts.init(this.$refs.lakerEcharts, 'weizwz')
      myChart.setOption(this.myOptions)
      this.myChart = myChart
      window.addEventListener('resize', () => myChart.resize())
      let self = this
      myChart.on('click', function (params) {
        self.chartOnclick(params)
      })
    }
  }
}
</script>
